import React, { Component } from 'react'
import {withRouter} from "react-router-dom"
import "./index.less"
import { Modal} from 'antd'
import { connect } from 'react-redux'
import {FullscreenOutlined,FullscreenExitOutlined} from "@ant-design/icons"
import weather from "@/assets/images/weather.png"
import { formateDate } from '@/utils/dateUtils'
import menuList from '@/config/menuConfig'
import LinkButton from '../link-button'
import {logout} from "@/redux/actions"

 class Header extends Component {
  state={
    isFull:false,
    currentTime:formateDate(Date.now()),  //当前时间字符串
    dayUrl:"",//天气图片
    weather:"",//天气文本
  }
  getTime=()=>{
    //每隔一秒获取当前的时间，并更新状态currentTime
   this.timer=setInterval(()=>{
      const currentTime=formateDate(Date.now());
      this.setState({currentTime})
    },1000)
  }

  //此处写获取天气的函数
  getWeather=()=>{

  }

  //获取标题
  getTitle=()=>{
    //得到当前的请求的路径
    const path=this.props.location.pathname;
    let title;
    menuList.forEach((item=>{
      if(item.key===path){  //如果当前的item的key于path一样，item的label就是需要显示的label
        title=item.label
      }else if(item.children){  //所以的子路由进行匹配
        const cItem=item.children.find(cItem=>path.indexOf(cItem.key)===0)
        if(cItem){    //如果有值才说明有匹配
          title=cItem.label
        }
      }
    })
  )
  return title;
  }

  //切换全屏和非全屏的切换
  openOrExtend=()=>{
    let app = document.querySelector('#root')//获取App
    const {isFull}=this.state;
    if(!isFull){
      app.requestFullscreen()   //实现全屏
      this.setState({isFull:true})
    }else{
      document.exitFullscreen(); //退出全屏
      this.setState({isFull:false})
    }
  }
  //退出登录的回调函数
  logOut=()=>{
    //显示确认框
    Modal.confirm(
     {
      // title: '确定退出吗？',
       content: '确定退出吗？',
      onOk:()=> {
        //删除保存的user数据
        this.props.logout();
      },
     }
      )
  }
  /**
   * 第一次render()之后执行一次
   *  一般在此执行异步操作：发ajax请求/启动定时器
   */
  componentDidMount(){
    //获取当前时间
    this.getTime()
  }

  //清除定时器当前组件卸载之前调用
  componentWillUnmount(){
    clearInterval(this.timer)
  }
  
  render() {
    const {isFull,currentTime}=this.state;
    const username=this.props.user.username;
    //得到当前需要显示的title
    //const title=this.getTitle();
    const title=this.props.headTitle;
    return (
      <div className='header'>
        <div className='header-top'>
          <span>欢迎，{username}</span>
          <LinkButton onClick={this.logOut}>
            退出
          </LinkButton>
        </div>
        <div className='header-bottom'>
          <div className='header-bottom-left'>
            {title}
          </div>
          <div className='header-bottom-right'>
            {/* 使用三元表达式做条件渲染 */}
           {isFull?<span style={{marginRight:'20px'}}><FullscreenExitOutlined onClick={this.openOrExtend} style={{fontSize:'20px',cursor:'pointer',verticalAlign:'-4px'}} /></span>:<span style={{marginRight:'20px'}}><FullscreenOutlined onClick={this.openOrExtend} style={{fontSize:'20px',cursor:'pointer',verticalAlign:'-4px'}}/></span>}
            <span>{currentTime}</span>
            <img src={weather} alt="天气" />
            <span>晴</span>
          </div>
        </div>
      </div>
    )
  }
}

export default connect(
  state=>({headTitle:state.headTitle,user:state.user}),
  {logout}
)(withRouter(Header))
